{{!
  Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.

  WSO2 Inc. licenses this file to you under the Apache License,
  Version 2.0 (the "License"); you may not use this file except
  in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing,
  software distributed under the License is distributed on an
  "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
  KIND, either express or implied. See the License for the
  specific language governing permissions and limitations
  under the License.
}}

<div class="col-lg-12  margin-top-double">
    <h1 class="grey "></h1>
    <hr>
</div>

<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 padding-top">
    <img src="{{@unit.publicUri}}/images/deviceType.png" class="img-responsive">
</div>

<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">

</div>

<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8 padding-top">
    <h3 class="uppercase">What it Does</h3>
    <hr>
    <p class="grey margin-top">Connect a sampledevice to WSO2 IoT Server and manage it.</p>
    <p>Add brief description what this device type does</p>
    <h3 class="uppercase">What You Need</h3>
    <p>Add hardware requirement which will be required to make this device type </p>
    <br>
    <hr>
    <br>
    <a href="/api-store/apis/info?name={{@uriParams.deviceType}}&version=1.0.0&provider=admin"
       class="btn-operations"
       target="_blank"><i class="fw fw-api add-margin-1x"></i> View API</i>
    </a>
    <a href="#" class="download-link btn-operations">
        <i class="fw fw-download add-margin-1x"></i>Download Agent
    </a>
    <div id="download-device-modal-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7  center-container">
                    <h3>Name your device and download the agent from following link.</h3>
                    <br/>
                    <form id="downloadForm" method="GET"
                          action="{{@app.context}}/api/devices/sketch/download">
                        <div id="invalid-username-error-msg" class="alert alert-danger hidden"
                             role="alert">
                            <i class="icon fw fw-error"></i><span></span>
                        </div>
                        <div class="control-group">
                            <div class="controls">
                                <input class="new-device-name" style="color:#3f3f3f;padding:5px"
                                       type="text"
                                       placeholder="Ex. Lobby_Device"
                                       name="deviceName" size="60" required>
                                <br/>
                                <input type="hidden" class="deviceType" name="deviceType"
                                       value="sampledevice"/>
                                <input type="hidden" class="sketchType" name="sketchType"
                                       value="sampledevice"/>
                            </div>
                        </div>
                        <div class="buttons" style="padding-bottom: 0px">
                            <a class="btn btn-operations" onclick="downloadAgent()">Download Now</a>

                            <a href="#" id="download-device-download-link"
                               class="btn btn-operations"> Copy Link
                            </a>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div id="device-agent-downloading-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Device Agent will downloading shortly.</h3>
                </div>
            </div>
        </div>
    </div>
    <div id="device-400-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Exception at backend. Try Later.</h3>
                    <div class="buttons">
                        <a href="#" id="device-400-link" class="btn-operations">
                            OK
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="device-401-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>You have to log in first.</h3><br/>
                    <div class="buttons">
                        <a href="#" id="device-401-link" class="blue-button">
                            Goto Login Page
                        </a>&nbsp;&nbsp;
                        <a href="#" onclick="hidePopup();" class="btn-operations">
                            Cancel
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="device-403-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Action not permitted.</h3><br/>

                    <div class="buttons">
                        <a href="#" id="device-403-link" class="btn-operations">
                            OK
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="device-409-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Device Sketch does not exist.</h3><br/>
                    <div class="buttons">
                        <a href="#" id="device-409-link" class="btn-operations">
                            OK
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="device-unexpected-error-content" class="hide">
        <div class="modal-content">
            <div class="row">
                <div class="col-md-7 col-centered center-container">
                    <h3>Unexpected error.</h3><br/>
                    <div class="buttons">
                        <a href="#" id="device-unexpected-error-link" class="btn-operations">
                            OK
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br/><br/>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding-double grey-bg">
    <h3 class="uppercase">Prepare</h3>
    <hr>
    <ul class="list-unstyled">
        <li class="padding-top-double"><span class="circle">01</span>&nbsp;&nbsp;&nbsp;Add how you
                                                                     are goining to
                                                                     prepare your device
        </li>
    </ul>
    <br>
    <br>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding-double">
    <h3 class="uppercase">Schematic Diagram</h3>
    <hr>
    <p class="grey margin-top">Click on the image to zoom</p>
    <center>
        <a href="{{@unit.publicUri}}/images/schematicsGuide.png" target="_blank">
            <img src="{{@unit.publicUri}}/images/schematicsGuide.png" class="img-responsive">
        </a>
    </center>
    <br/>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 padding-double">
    <h3 class="uppercase">Try Out</h3>
    <hr>
    <ul class="list-unstyled">
        <li class="padding-top-double">
            <span class="circle">01</span>
            &nbsp;&nbsp;&nbsp;You can view all your connected devices at
            <a href="{{@app.context}}/devices">[Device Management]</a> page.
        </li>
        <li class="padding-top-double">
            <span class="circle">02</span>
            &nbsp;&nbsp;&nbsp;Select one of connected devices and check for available control
            operations and monitor Real-Time data.
        </li>
        <li class="padding-top-double">
            <span class="circle">03</span>
            &nbsp;&nbsp;&nbsp;You can also view analytics of the data published to IoT-Server by
            navigating to Device Analytics page.
        </li>
    </ul>
    <br/>
</div>

{{#zone "topCss"}}
    {{css "css/styles.css"}}
{{/zone}}

{{#zone "bottomJs"}}
    {{js "/js/download.js"}}
    {{js "/js/jquery.validate.js"}}
{{/zone}}